<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS定位的特殊应用</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .outer {
        height: 400px;
        background-color: pink;
        position: relative;
    }

    .inner {
        background-color: orange;
        font-size: 20px;
        padding: 20px;
        border: 10px solid black;
        /*    发生固定/绝对定位的元素宽高都是由内容决定的，absolute和fixed是固定定位*/
        /*想让发生固定/绝对定位的元素宽高撑满整个包含块，怎么做呢？*/
        position: absolute;
        top: 0;
        left: 0;
        
    }

    .test {
        background-color: aqua;
    }
</style>
<body>
<!--
子绝父相中,参考点是包含块的边框border,会越过了padding
-->

</body>
<div class="outer">
    <div class="inner">你好啊</div>
</div>
<div class="test">111</div>
</html>